<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>页面管理</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in slist" :key="item">
        <img :src="imgPath+item.url">
      </el-carousel-item>
    </el-carousel>
    <el-card>
      <el-button type="primary" @click="addDialogVisible=true"  @close="addSlideshowFormClose" style="margin-left: 950px ;margin-top: 5px">添加轮播图</el-button>
      <el-table :data="slist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="图片地址" prop="url"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeTagById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--添加-->
    <el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%">
      <el-form
          :model="addSlideshowForm"
          ref="addSlideshowFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="地址" prop="url">
          <el-input v-model="addSlideshowForm.url" readonly></el-input>
          <el-upload
              class="avatar-uploader"
              :headers="myheaders"
              name="multipartFile"
              :action="this.$baseUrl.baseUrl+'slideshow/slideshowImgUpload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload">
            <img style="width: 300px" v-if="addSlideshowForm.url" :src="imgPath+addSlideshowForm.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSlideshow">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--修改-->
    <el-dialog
        title="修改用戶"
        :visible.sync="editDialogVisible"
        width="50%"
    >
      <el-form
          :model="editSlideshowForm"
          ref="editSlideshowFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
<!--        <el-form-item label="地址" prop="url">
          <el-input v-model="editSlideshowForm.url"></el-input>
        </el-form-item>-->
        <el-form-item label="地址" prop="url">
          <el-input v-model="editSlideshowForm.url" readonly></el-input>
          <el-upload
              :headers="myheaders"
              class="avatar-uploader"
              name="multipartFile"
              :action="this.$baseUrl.baseUrl+'slideshow/slideshowImgUpload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img style="width: 300px" v-if="editSlideshowForm.url" :src="imgPath+editSlideshowForm.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editSlideshow">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
<script>

export default {
  data(){
    return{
      myheaders:{
        token:sessionStorage.getItem("token")
      },
      imgPath : this.$baseUrl.imgUrl + "Imgs/slideshow/",
      addDialogVisible:false,
      editDialogVisible:false,
      slist:[],
      addSlideshowForm:{
        url:"",
      },
      editSlideshowForm:{
        id:-1,
        url:"",
      }
    }
  },
  methods:{
    handleAvatarSuccess(res) {
      this.editSlideshowForm.url=res.data;
    },
    handleAvatarSuccess1(res) {
      this.addSlideshowForm.url=res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    async removeTagById(id) {
      if(confirm("确认要删除吗？")) {
        let url = this.$baseUrl.baseUrl + "slideshow/del/" + id;
        this.$axios.delete(url).then(res => {
          alert(res.data.msg);
          this.getList();
        })
      }
    },
    addSlideshow(){
      let url = this.$baseUrl.baseUrl+"slideshow/add"
      this.$axios.post(url,{
        url:this.addSlideshowForm.url
      }).then(res=>{
        if(res.data.code==200){
          this.addDialogVisible=false,
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
          this.getList();
        }else {
          this.$message({
            message:res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    addSlideshowFormClose() {
      this.$refs.addSlideshowFormRef.resetFields();
    },
    showEditDialog(row) {
      this.editDialogVisible=true
      this.editSlideshowForm.id=row.id
      this.editSlideshowForm.url=row.url
    },
    editSlideshow(){
      let url= this.$baseUrl.baseUrl+"slideshow/modify"
      this.$axios.put(url,{
        id:this.editSlideshowForm.id,
        url:this.editSlideshowForm.url
      }).then(res=>{
        if(res.data.code==200){
          this.editDialogVisible=false,
              this.$message({
                message:res.data.msg,
                type:'success',
                duration:1000
              })
          this.getList();
        }else {
          this.$message({
            message:res.data.msg,
            type:'success',
            duration:1000
          })
        }
      })
    },
    getList(){
      let url = this.$baseUrl.baseUrl+"slideshow/list"
      this.$axios.get(url).then(res=>{
        if(res.data.code=200){
          this.slist=res.data.data;
        }
      })
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style lang="less" scoped>
</style>  